
<script type="text/javascript">
$(document).ready(function (){
	$( "#tabs" ).tabs();
	
	/******************company information*****************/
	
	$("#affiliatecompanyinformationform").validate({
		errorClass: "my-error-class",
		validClass: "my-valid-class",
		debug: false,
		rules: {
			companyname: "required"
			/*companyaddress : "required",
			companyemail: {
					required: true,
					email: true
				},
			zipcode : "required",
			landline : "required",
			faxno : "required",
			mobileno1 : "required",
			mobileno2 : "required",
			cityname : "required",
			country : "required",
			countrycode : "required",
			websiteurl : "required",
			firstname : "required",
			lastname : "required",
			middlename : "required",
			personemail : "required"*/
		},
		submitHandler: function(form){
			$.post("query/addcompanyinformation.php", $("#affiliatecompanyinformationform").serialize(), function(data){
				alert(data);
			});
		}
	});
	
	$("#cityname").autocomplete({
		source: "query/getcity.php",
		minLength: 2,
		/*change: function(event,ui){
			$("affiliatecompanyinformationform#country").val(ui.item.country);
			$("affiliatecompanyinformationform#countrycode").val(ui.item.countrycode);
		},*/
		open: function() {
			$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
		}
	});	
	
	
	
	/******************vehicles*****************/
	
	$("#vehicleinformationform").validate({
		errorClass: "my-error-class",
		validClass: "my-valid-class",
		debug: false,
		rules: {
			cityvehicle: "required",
			"vehicletype[]": "required",
			"capacity[]": "required",
			"vehiclemodel[]": "required"
		},
		messages: {
			"vehicletype[]": "*",
			"capacity[]": "*",
			"vehiclemodel[]": "*"
		},
		submitHandler: function(form){
			$.post("scripts/addvehicleinformation.php", $("#vehicleinformationform").serialize(), function(data){
				alert(data);
				//cleanDiv();
			});
		}
	});
	
	$("#companynamevehicle").autocomplete({
			source: "scripts/getcompanyinfo.php",
			minLength: 2,
			change: function(event,ui){
				$("input#countryvehicle").val(ui.item.country);
				$("input#cityvehicle").focus();
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	$("#vehicletypeone").autocomplete({
			source: "scripts/getvehicle.php",
			minLength: 2,
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	$("#vehicletypehourly").autocomplete({
			source: "scripts/getvehicle.php",
			minLength: 2,
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	
	/**********************airport******************/
	$("#airportinformation").validate({
		errorClass: "my-error-class",
		validClass: "my-valid-class",
		debug: false,
		rules: {
			cityairport: "required",
			airportname: "required"
		},
		submitHandler: function(form){
			$.post("scripts/addairportinformation.php", $("#airportinformation").serialize(), function(data){
				alert(data);
			});
		}
	});
	
	$("#companynameairport").autocomplete({
			source: "scripts/getcompanyinfo.php",
			minLength: 2,
			change: function(event,ui){
				$("input#citynameairport").val(ui.item.city);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	
	/************************form driver***************/
	$("#driversinformationform").validate({
		errorClass: "my-error-class",
		validClass: "my-valid-class",
		debug: false,
		rules: {
			citydriver: "required"
			/*fname : "required",
			lname : "required",
			mi : "required",
			companyname : "required",
			driverremarks : "required",
			date : "required"*/
		},
		submitHandler: function(form){
			$.post("scripts/adddriversinformation.php", $("#driversinformationform").serialize(), function(data){
				alert(data);
			});
		}
	});
		
	
	$("#companydriver").autocomplete({
			source: "scripts/getcompanyinfo.php",
			minLength: 2,
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
 
    $('#photoimgdriver').live('change', function() { 
		$("#picpreviewdriver").html('');
		$("#picpreviewdriver").html('<img src="images/loader.gif" alt="Uploading...."/>');
		$("#imageform").ajaxForm({
			target: '#picpreviewdriver'
		}).submit();
	});
	
	$("#btnCleardriver").click(function(){
		$('#imageform').each(function(){
			this.reset();
		});
		$("#picpreviewdriver").empty();
	});
	
	
	
	
});
</script>

<script type="text/javascript">
var fctr = 1;
var fctrhourly = 1;
function fncCreateElement(){
	var mySpan = document.getElementById('mySpanvehicle');

	var myElement1 = document.createElement('input');
	myElement1.setAttribute('type',"text");
	myElement1.setAttribute('id',"vehicletype"+fctr);
	myElement1.setAttribute('name',"vehicletypeone[]");
	myElement1.style.width = '200px';
	mySpan.appendChild(myElement1);	
	
	$("#vehicletype"+fctr).autocomplete({
			source: "scripts/getvehicle.php",
			minLength: 2,
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	var myElement1 = document.createElement('input');
	myElement1.setAttribute('type',"text");
	myElement1.setAttribute('name',"distanceone[]");
	myElement1.style.width = '200px';
	mySpan.appendChild(myElement1);

	var myElement1 = document.createElement('input');
	myElement1.setAttribute('type',"text");
	myElement1.setAttribute('name',"rateone[]");
	myElement1.style.width = '100px';
	mySpan.appendChild(myElement1);	   

	var myElement1 = document.createElement('br');
	mySpan.appendChild(myElement1);
	
	fctr++;
}
	
function fncCreateElementhourly(){
	var mySpan = document.getElementById('mySpanvehiclehourly');

	var myElement1 = document.createElement('input');
	myElement1.setAttribute('type',"text");
	myElement1.setAttribute('id',"vehicletypehourly"+fctrhourly);
	myElement1.setAttribute('name',"vehicletypehourly[]");
	myElement1.style.width = '200px';
	mySpan.appendChild(myElement1);	
	
	
	$("#vehicletypehourly"+fctrhourly).autocomplete({
			source: "scripts/getvehicle.php",
			minLength: 2,
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	var myElement1 = document.createElement('input');
	myElement1.setAttribute('type',"text");
	myElement1.setAttribute('name',"minimumhourly[]");
	myElement1.style.width = '200px';
	mySpan.appendChild(myElement1);

	var myElement1 = document.createElement('input');
	myElement1.setAttribute('type',"text");
	myElement1.setAttribute('name',"ratehourly[]");
	myElement1.style.width = '100px';
	mySpan.appendChild(myElement1);	   

	var myElement1 = document.createElement('br');
	mySpan.appendChild(myElement1);
	
	fctrhourly++;
}

function fncCreateElementairport(){
	var mySpan = document.getElementById('mySpanairport');

	var myElement1 = document.createElement('input');
	myElement1.setAttribute('type',"text");
	myElement1.setAttribute('name',"airportname[]");
	myElement1.style.width = '200px';
	mySpan.appendChild(myElement1);	
	
	var myElement1 = document.createElement('input');
	myElement1.setAttribute('type',"text");
	myElement1.setAttribute('name',"airportaddress[]");
	myElement1.style.width = '200px';
	mySpan.appendChild(myElement1);	

	var myElement1 = document.createElement('br');
	mySpan.appendChild(myElement1);
}


</script>

<!--  start nav-outer-repeat................................................... END -->
 
 <div class="clear"></div>
 
<!-- start content-outer -->
<div id="content-outer">
<!-- start content -->
<div id="content">


<div id="page-heading"><h1>Add Affiliate Information</h1></div>


<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
<tr>
	<th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
	<th class="topleft"></th>
	<td id="tbl-border-top">&nbsp;</td>
	<th class="topright"></th>
	<th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
</tr>
<tr>
	<td id="tbl-border-left"></td>
	<td>
	<!--  start content-table-inner -->
	<div id="content-table-inner">
		<table border="0" width="100%" cellpadding="0" cellspacing="0">
		<tr valign="top">
		<td>
		
			<!-- start id-form  -->
			<table border="0" cellpadding="0" cellspacing="0"  id="id-form">
			
			<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Company Information</a></li>
				<li><a href="#tabs-2">Vehicles</a></li>
				<li><a href="#tabs-3">Airports</a></li>
				<li><a href="#tabs-4">Drivers</a></li>
				<li><a href="#tabs-5">Terms and Conditions</a></li>
			</ul>
			
			<div id="tabs-1">
			<legend> <h3> General Information </h3> </legend>
				<label> <font color="red">*</font> required field/s </label>
				<fieldset> 
				<form id="affiliatecompanyinformationform" method="post" action="">
				
				<p>
					<input type="text" id="cityname" name="cityname" autocomplete="off" placeholder="City Name"/>
					<input type="text" id="country" name="country" autocomplete="off" placeholder="Country Name"/>
					<input type="text" id="countrycode" name="countrycode" autocomplete="off" placeholder="Country Code"/>	
					<input type="text" id="countrycode" name="countrycode" autocomplete="off" placeholder="Country Code"/>	

					<img id="addcity" style="border:none; position: relative; top: 5px;" src="images/forms/add_button.png" height="20px" width="50px" />
				</p>
				
				<p> <br><hr class="hr1">  </p>
				<br>
				<p>
					<input type="text" id="companyname" name="companyname" autocomplete="off" placeholder="Company Name"/>
					<input type="text" id="companyaddress" name="companyaddress" autocomplete="off" placeholder="Company Address"/>
					<input type="text" id="companyemail" name="companyemail" autocomplete="off" placeholder="Company Email"/>
					
				</p>
				
				<p> <br><hr class="hr1">  </p>
				<br>
				<p>
					<input type="text" id="landline" name="landline" autocomplete="off" placeholder="Land line number"/>
					<input type="text" id="faxno" name="faxno" autocomplete="off" placeholder="fax number"/>
					<input type="text" id="mobileno1" name="mobileno1" autocomplete="off" placeholder="mobileno"/>
				</p>
				
				
				<p> <br><hr class="hr1">  </p>
				
				<p>
				<h3> Contact Person </h3>
					<input type="text" id="contactname" name="contactname" autocomplete="off" placeholder="Contact Name"/>
					<input type="text" id="contactemail" name="contactemail" autocomplete="off" placeholder="Contact Email"/>
				</p>
				
				<p> <br><hr class="hr1">  </p>
				
				<h3> Company Website URL </h3>
					<input type="text" id="websiteurl" name="websiteurl" autocomplete="off" placeholder="Website URL"/>
				</p>
				
				<p> <br><hr class="hr1">  </p>
					<input type="submit" class="form-submit" />
				</form>	
				</fieldset>
			</div>
			
			<div id="tabs-2">
				<label> <font color="red">*</font> required field/s </label>
				<fieldset>
				<form id="vehicleinformationform" method="post" action="">
				<legend> <h3> City </h3> </legend>
				<p>
					<input type="text" id="companynamevehicle" name="companynamevehicle" autocomplete="off" placeholder="Company Name"/>
				</p>
				
				<p> <br><hr class="hr1">  </p>
				<h3> Vehicle Information </h3>
					One Way/Airport Vehicle </br>
					<label for="vehicletype" style="position: relative; top: 20px; left: 0px"> Vehicle Type </label><br> <label for="Capacity" style="position: relative; left: 205px"> Destination (From-To)</label> <label for="vehiclemodel" style="position: relative; left: 280px">Rate</label></br>
					<input type="text" name="vehicletypeone[]" id="vehicletypeone" class="searchinput" placeholder="Vehicle Type" style="width: 200px;"/> 
					<input type="text" name="distanceone[]" id="distanceone"  placeholder="Distance (From-To)" style="position: relative; left: -5px; width: 200px;"/>
					<input type="text" name="rateone[]" id="rateone"  placeholder="Rate" style="position: relative; left: -8px; width: 100px;"/>
					<span id="mySpanvehicle"><br></span><br>
					<input name="btnButton" type="button" value="+ Add More" onClick="JavaScript:fncCreateElement();"> <br>
					
				<p> <br><hr class="hr1">  </p>
					Hourly Vehicle </br>
					<label for="vehicletype" style="position: relative; top: 20px; left: 0px"> Vehicle Type </label><br> <label for="Capacity" style="position: relative; left: 205px"> Destination (From-To)</label> <label for="vehiclemodel" style="position: relative; left: 280px">Rate</label></br>
					<input type="text" name="vehicletypehourly[]" id="vehicletypehourly"  placeholder="Vehicle Type" style="width: 200px;"/> 
					<input type="text" name="minimumhourly[]" id="minimumhourly"  placeholder="Number of hours" style="position: relative; left: -5px; width: 200px;"/>
					<input type="text" name="ratehourly[]" id="ratehourly"  placeholder="Rate" style="position: relative; left: -5px; width: 100px;"/>
					<span id="mySpanvehiclehourly"><br></span><br>
					<input name="btnButton" type="button" value="+ Add More" onClick="JavaScript:fncCreateElementhourly();"> <br>
			
				<p> <br><hr class="hr1">  </p>
				<input type="submit" value="Submit"> <input type="reset" value="Clear">
				
				</form>
				</fieldset>
			</div>
			
			<div id="tabs-3">
				<fieldset> 
				<form id="airportinformation" method="post" action="">
				<legend> <h3> Company </h3> </legend>
				<p>
					<input type="text" id="companynameairport" name="companynameairport" autocomplete="off" placeholder="Company Name"/>
					<input type="text" id="citynameairport" name="citynameairport" autocomplete="off" placeholder="City Name"/>
				
				</p>
				
				<p> <br><hr class="hr1">  </p>
				
				<p>
				Airport Information</br>
				<label> <font color="red">*</font> required field/s </label>
				<label for="vehicletype" style="position: relative; top: 20px; left: 0px"> Airport Name </label> </br><label for="Capacity" style="position: relative; left: 205px"> Airport Address</label></br>
					<input type="text" id="airportname" name="airportname[]" autocomplete="off" placeholder="Airport Name" style="width: 200px;"/>
					<input type="text" id="airportaddress" name="airportaddress[]" autocomplete="off" placeholder="Airport Address" style="width: 200px;"/>
					<span id="mySpanairport"><br></span><br>
					<input name="btnButton" type="button" value="+ Add More" onClick="JavaScript:fncCreateElementairport();"> <br>
				</p>
				
				<p> <br><hr class="hr1">  </p>
					<input type="submit" value="Submit"> <input type="reset" value="Clear">
					
				</form>	
				</fieldset>
			</div>
			
			
			<div id="tabs-4">
				<label> <font color="red">*</font> required field/s </label>
				<fieldset style="height: 300px">
				<form id="Driver" method="post" action="">
				<legend> <h3> Driver Information </h3> </legend>
				<form id="imageform" method="post" enctype="multipart/form-data" action='scripts/ajaximage.php'>
					Upload your image <input type="file" name="photoimgdriver" id="photoimgdriver" />
					<div id="picpreviewdriver"> <br><br><br>image shown here.... </div>
				</form>
				
				<div style="border: 1px solid #dedede; position:absolute; top: 95px; left: 320px; width:470px;">
				<form id="driversinformationform" method="post" action="">
					<input type="text" id="companydriver" name="companydriver" autocomplete="off" placeholder="Company Name"/>
					<input type="text" id="fname" name="fname" autocomplete="off" placeholder="First Name"/>
					<input type="text" id="lname" name="lname" autocomplete="off" placeholder="Last Name"/>
					<input type="text" id="mi" name="mi" autocomplete="off" placeholder="Middle Initial"/>
					
				</form>
				</fieldset>
			</div>
			
			
			<div id="tabs-5">
				<label> <font color="red">*</font> required field/s </label>
				<fieldset> 
				<form id="termsinformationform" method="post" action="">
				<legend> <h3> City </h3> </legend>
				<p>
					<input type="text" id="cityterms" name="cityterms" autocomplete="off" placeholder="City Name"/>
				</p>
				
				<p> <hr class="hr1">  </p>
				
				<p>
				<h3> Terms And Conditions </h3>
					<textarea id="termsandconditions" name="termsandconditions" rows="10" cols="80" placeholder="comments here..."></textarea>
				</p>
				
				<p> <br><hr class="hr1">  </p>
					<input type="submit" value="Submit"> <input type="reset" value="Clear">
					
				</form>	
				</fieldset>
			</div>
			
			
			</table>
			<!-- end id-form  -->
		</td>
			
		</tr>
		<tr>
		<td><img src="images/shared/blank.gif" width="695" height="10" alt="blank" /></td>
		</tr>
		</table>

		<div class="clear"></div>
	</div>
	
<!--  end content-table-inner  -->
	</td>
	<td id="tbl-border-right"></td>
</tr>
<tr>
	<th class="sized bottomleft"></th>
	<td id="tbl-border-bottom">&nbsp;</td>
	<th class="sized bottomright"></th>
</tr>
</table>


<div class="clear">&nbsp;</div>

</div>
<!--  end content -->
<div class="clear">&nbsp;</div>
</div>
<!--  end content-outer -->
<div class="clear">&nbsp;</div>
